<template>
  <div class="page-box flex-col">
    <div class="page-bg" />
    <div class="page-container flex-col">
      <scroll-view
        class="scroll-box"
        scroll-y="true"
        @scrolltolower="onScrollBottom"
      >
        <div class="main1 flex-col">
          <div class="search flex-col">
            <div class="group3 flex-row">
              <div class="mod2 flex-col">
                <div class="block1 flex-row">
                  <img
                    class="icon3"
                    referrerpolicy="no-referrer"
                    src="../../static/images/search.png"
                  />
                  <input
                    v-model="queryParams.keyword"
                    class="txt2"
                    type="text"
                    placeholder="输入维修站名称、地址"
                  />
                </div>
              </div>
              <span class="word1" @click="reflash">搜索</span>
            </div>
          </div>
          <div class="outer7 flex-row">
            <span class="txt1">全部维修站</span>
            <span class="txt2" @click="open">{{
              queryParams.currentAreaName
            }}</span>
            <img
              class="icon3"
              referrerpolicy="no-referrer"
              src="../../static/images/sort.png"
            />
          </div>
          <div
            class="outer8 flex-col"
            v-for="item in dealerList"
            :key="item.id"
          >
            <div class="rang-hr" :class="{ small: !item.email }"></div>
            <div class="main2 flex-col">
              <div class="area">{{ formatterArea(item) }}</div>
              <div class="layer4 flex-row">
                <span class="word5 user"></span>
                <span class="info5" style="max-width: calc(100% - 200rpx)">{{
                  item.contactPerson
                }}</span>
              </div>
              <div class="layer4 flex-row">
                <span class="word5 phone"></span>
                <span class="info5 text-hidden">{{ item.phone }}</span>
              </div>
              <div class="layer4 flex-row" v-if="item.email">
                <span class="word5 email"></span>
                <span class="info5 text-hidden">{{ item.email }}</span>
              </div>
              <div class="layer4 flex-row">
                <span class="word5 address"></span>
                <span class="info5">{{ item.address }}</span>
              </div>
              <div class="layer8 flex-row">
                <div
                  class="main3 flex-col"
                  v-for="text in item.products"
                  :key="text"
                >
                  <span class="word9">{{ text }}</span>
                </div>
                <!-- <div class="main3 flex-col">
                  <span class="word9">{{ formatterArea(item) }}</span>
                </div> -->
              </div>
            </div>
          </div>

          <div v-if="loading" class="x-f" style="margin-top: 10px">
            <u-loading mode="circle"></u-loading>
            <div style="margin-left: 10px">加载中..</div>
          </div>
          <u-empty
            v-if="!loading && dealerList.length <= 0"
            text="暂无数据"
            mode="list"
          ></u-empty>
        </div>
      </scroll-view>
    </div>
    <u-picker
      v-model="show"
      mode="selector"
      :default-selector="[0]"
      :range="categoryList"
      range-key="label"
      @confirm="onConfirm"
    ></u-picker>
  </div>
</template>

<script>
import { getAreaList, getDealerList, getCategoryList } from "@/api";
import { getProductTypes } from "@/utils/tools";
export default {
  data() {
    return {
      form: {
        categoryId: "",
        categoryName: "",
        name: "",
        phone: "",
        message: "",
      },
      rules: {
        categoryName: [
          {
            required: true,
            message: "请选择产品模块",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请填写联系人",
            trigger: "change",
          },
        ],
        phone: [
          {
            required: true,
            message: "请填写手机号",
            trigger: "change",
          },
        ],
        message: [
          {
            required: true,
            message: "请填写咨询信息",
            trigger: "change",
          },
        ],
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        keyword: "",
        areaId: "",
        currentAreaName: "所有产品",
        type: 2,
        productType: "",
      },
      dealerList: [],
      categoryList: [],
      showForm: false,
      show: false,
      isEnd: false,
      loading: false,
      areaList: [],
      areaSelectList: [],
      categoryAll: [],
      category:[]
    };
  },
  created() {
    getCategoryList({ pageNum: 1, pageSize: 999 }).then((res) => {
      this.category = res.data;
      this.categoryAll = [
        { label: "所有产品", value: "" },
        ...res.data.map((x) => ({ label: x.name, value: x.id })),
      ];
      this.categoryList = [
        { label: "所有产品", value: "" },
        ...res.data
          .filter((x) => x.pid == 0 && x.status == 0)
          .map((x) => ({ label: x.name, value: x.id })),
      ];
      this.getDealerList();
    });
    getAreaList({ pageNum: 1, pageSize: 99 }).then((res) => {
      this.areaSelectList = [
        { label: "所有地区", value: "" },
        ...res.rows.map((x) => ({ label: x.areaName, value: x.id })),
      ];

      this.areaList = res.rows;
    });
  },
  onReady() {},
  methods: {
    formmtterProductType(row) {
      let str = [];
      if (!row.productType) return str;
      if (!this.categoryAll.length) return str;
      if (typeof row.productType == "string") {
        row.productType = row.productType.split(",");
      }

      row.productType.forEach((item) => {
        const c = this.categoryAll.find((i) => i.value == item);
        if (c) {
          str.push(c.label);
        }
      });
      return str;
    },
    formatterArea(row) {
      if (!this.areaList.length) return "";
      return this.areaList.find((i) => i.id == row.areaId).areaName;
    },
    getDealerList() {
      this.loading = true;
      const productTypeStr = getProductTypes(this.category,this.queryParams.productType);
      getDealerList({ ...this.queryParams,productType:productTypeStr }).then((res) => {
        res.rows.forEach((item) => {
          item.products = this.formmtterProductType(item);
        });
        this.loading = false;
        this.isEnd = res.rows.length < this.queryParams.pageSize;
        this.dealerList = [...this.dealerList, ...res.rows];
      });
    },
    onScrollBottom() {
      if (!this.isEnd) {
        this.queryParams.pageNum++;
        this.getDealerList();
      }
    },
    reflash() {
      this.queryParams.pageNum = 1;
      this.dealerList = [];
      this.getDealerList();
    },
    open() {
      this.show = true;
    },
    onConfirm(index) {
      this.queryParams.productType = this.categoryList[index[0]].value;
      this.queryParams.currentAreaName = this.categoryList[index[0]].label;
      this.reflash();
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: "114",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  z-index: 94;
  height: 88rpx;
  width: 750rpx;
  justify-content: center;
  align-items: center;
  .group3 {
    z-index: auto;
    width: 686rpx;
    height: 66rpx;
    justify-content: space-between;
    .mod2 {
      z-index: 96;
      height: 66rpx;
      border-radius: 33rpx;
      background-color: rgba(44, 44, 46, 1);
      width: 616rpx;
      justify-content: center;
      align-items: flex-start;
      padding-left: 22rpx;
      .block1 {
        z-index: auto;
        width: 100%;
        height: 40rpx;
        .icon3 {
          z-index: 97;
          width: 40rpx;
          height: 40rpx;
        }
        .txt2 {
          z-index: 104;
          height: 40rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(208, 208, 208, 1);
          font-size: 28rpx;
          letter-spacing: 0.3039473593235016rpx;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: left;
          flex: 1;
        }
      }
    }
    .word1 {
      z-index: 105;
      width: 57rpx;
      height: 40rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(208, 208, 208, 1);
      font-size: 24rpx;
      letter-spacing: 0.3039473593235016rpx;
      white-space: nowrap;
      line-height: 40rpx;
      text-align: right;
      margin-top: 13rpx;
      margin-left: 14rpx;
    }
  }
}
.main1 {
  z-index: auto;
  width: 750rpx;
  .outer4 {
    z-index: 70;
    height: 112rpx;
    background-color: rgba(255, 255, 255, 0);
    width: 750rpx;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 22rpx;
    .layer1 {
      z-index: auto;
      width: 696rpx;
      height: 77rpx;
      .box2 {
        z-index: auto;
        width: 696rpx;
        height: 42rpx;
        .info2 {
          z-index: 73;
          width: 122rpx;
          height: 42rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 30rpx;
          letter-spacing: 0.3256578743457794rpx;
          white-space: nowrap;
          line-height: 42rpx;
          text-align: left;
        }
        .info3 {
          z-index: 79;
          width: 227rpx;
          height: 40rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(208, 208, 208, 1);
          font-size: 28rpx;
          letter-spacing: 0.3039473593235016rpx;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: right;
          margin: 1rpx 0 0 307rpx;
        }
        .icon2 {
          z-index: 74;
          width: 32rpx;
          height: 32rpx;
          margin: 6rpx 0 0 8rpx;
        }
      }
      .box3 {
        z-index: 72;
        width: 686rpx;
        height: 1rpx;
        background-color: rgba(84, 84, 84, 1);
        align-self: flex-start;
        margin-top: 34rpx;
      }
    }
  }
  .outer5 {
    z-index: auto;
    width: 750rpx;
    height: 224rpx;
    .layer2 {
      z-index: 82;
      height: 112rpx;
      background-color: rgba(255, 255, 255, 0);
      width: 750rpx;
      justify-content: flex-end;
      align-items: center;
      .layer3 {
        z-index: auto;
        width: 686rpx;
        height: 77rpx;
        .mod1 {
          z-index: auto;
          width: 686rpx;
          height: 42rpx;
          justify-content: space-between;
          .info4 {
            z-index: 85;
            width: 122rpx;
            height: 42rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 30rpx;
            letter-spacing: 0.3256578743457794rpx;
            white-space: nowrap;
            line-height: 42rpx;
            text-align: left;
          }
          .word2 {
            z-index: 86;
            width: 255rpx;
            height: 40rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(208, 208, 208, 1);
            font-size: 28rpx;
            letter-spacing: 0.3039473593235016rpx;
            white-space: nowrap;
            line-height: 40rpx;
            text-align: right;
            margin-top: 1rpx;
          }
        }
        .mod2 {
          z-index: 84;
          width: 686rpx;
          height: 1rpx;
          background-color: rgba(84, 84, 84, 1);
          margin-top: 34rpx;
        }
      }
    }
  }
  .word3 {
    z-index: 97;
    width: 122rpx;
    height: 42rpx;
    display: block;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    letter-spacing: 0.3256578743457794rpx;
    white-space: nowrap;
    line-height: 42rpx;
    text-align: left;
    align-self: flex-start;
    margin: 35rpx 0 0 30rpx;
  }
  .outer6 {
    z-index: 96;
    border-radius: 8rpx;
    border: 1rpx solid rgba(84, 84, 84, 1);
    // width: 686rpx;
    padding: 23rpx 24rpx;
    .textarea {
      z-index: 98;
      width: 629rpx;
      height: 80rpx;
      display: block;
      overflow-wrap: break-word;
      color: #fff;
      font-size: 28rpx;
      // letter-spacing: 0.3039473593235016rpx;
      // line-height: 40rpx;
      // text-align: left;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
  }
  .outer7 {
    z-index: 22;
    width: 100%;
    padding: 32rpx 22rpx;
    box-sizing: border-box;
    .txt1 {
      z-index: 116;
      width: 172rpx;
      height: 48rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 34rpx;
      letter-spacing: 0.36907893419265747rpx;
      font-family: PingFangSC-Medium;
      white-space: nowrap;
      line-height: 48rpx;
      text-align: left;
      border-left: 10rpx solid #ffbf10;
      padding-left: 20rpx;
    }
    .txt2 {
      z-index: 117;
      height: 40rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(208, 208, 208, 1);
      font-size: 28rpx;
      letter-spacing: 0.3039473593235016rpx;
      white-space: nowrap;
      line-height: 40rpx;
      text-align: left;
      margin: 4rpx 0 0 0rpx;
      flex: 1;
      text-align: right;
    }
    .icon3 {
      z-index: 118;
      width: 40rpx;
      height: 40rpx;
      margin-top: 4rpx;
    }
  }
  .outer8 {
    z-index: 8;
    background: rgba(28, 28, 30, 0.5);
    border-radius: 8rpx;
    // filter: blur(10px);
    align-self: center;
    margin-bottom: 32rpx;
    width: 663rpx;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 28rpx 23rpx 23rpx 23rpx;
    position: relative;
    .rang-hr {
      width: 8rpx;
      height: 204rpx;
      background: #ffbf10;
      position: absolute;
      top: 32rpx;
      left: 0rpx;
      &.small {
        height: 146rpx;
      }
    }
    .main2 {
      z-index: auto;
      position: relative;
      width: 100%;
      .area {
        height: 40rpx;
        line-height: 40rpx;
        background: #333333;
        border-radius: 4rpx;
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        padding: 0 20rpx;
        font-size: 24rpx;
        color: #d0d0d0;
      }
      .layer4 {
        z-index: auto;
        margin-bottom: 16rpx;
        .word5 {
          z-index: 10;
          width: 40rpx;
          height: 40rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(208, 208, 208, 1);
          font-size: 28rpx;
          line-height: 40rpx;
          text-align: left;
          margin-top: 1rpx;
          margin-right: 20rpx;
          background: url(../../static/images/user.png) no-repeat;
          background-size: cover;
          &.phone {
            background-image: url(../../static/images/phone.png);
          }
          &.email {
            background-image: url(../../static/images/email.png);
          }
          &.address {
            background-image: url(../../static/images/address.png);
          }
        }
        .info5 {
          z-index: 11;
          width: 560rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(208, 208, 208, 1);
          font-size: 30rpx;
          line-height: 42rpx;
          text-align: left;
        }
      }
      .layer8 {
        z-index: auto;
        margin-top: 24rpx;
        // justify-content: space-between;
        flex-wrap: wrap;
        .main3 {
          z-index: 22;
          height: 58rpx;
          border-radius: 4rpx;
          border: 1rpx solid rgba(255, 191, 16, 1);
          justify-content: center;
          align-items: center;
          padding: 0 20rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          .word9 {
            z-index: 23;
            height: 40rpx;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 191, 16, 1);
            font-size: 28rpx;
            letter-spacing: 0.3039473593235016rpx;
            white-space: nowrap;
            line-height: 40rpx;
            text-align: center;
          }
        }
      }
    }
  }
}
.main5 {
  z-index: 102;
  height: 259rpx;
  background-color: rgba(28, 28, 30, 1);
  width: 750rpx;
  justify-content: flex-start;
  position: absoulte;
  left: 0;
  bottom: 0;

  .main6 {
    z-index: auto;
    width: 750rpx;
    height: 175rpx;
    .main7 {
      z-index: 112;
      width: 750rpx;
      height: 1rpx;
      background-color: rgba(84, 84, 84, 1);
    }
    .info12 {
      z-index: 113;
      width: 631rpx;
      height: 33rpx;
      display: block;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 24rpx;
      letter-spacing: 0.26052629947662354rpx;
      white-space: nowrap;
      line-height: 33rpx;
      text-align: center;
      align-self: flex-start;
      margin: 13rpx 0 0 32rpx;
    }
    .main8 {
      z-index: auto;
      width: 648rpx;
      height: 96rpx;
      justify-content: space-between;
      margin: 32rpx 0 0 48rpx;
      .main9 {
        z-index: 105;
        height: 96rpx;
        border-radius: 4rpx;
        border: 2rpx solid rgba(255, 191, 16, 1);
        width: 308rpx;
        justify-content: center;
        align-items: center;
        .txt12 {
          z-index: 106;
          width: 120rpx;
          height: 42rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 191, 16, 1);
          font-size: 30rpx;
          white-space: nowrap;
          line-height: 42rpx;
          text-align: center;
        }
      }
      .main10 {
        z-index: 109;
        height: 96rpx;
        border-radius: 4rpx;
        background-color: rgba(255, 191, 16, 1);
        width: 308rpx;
        justify-content: center;
        align-items: center;
        .word19 {
          z-index: 110;
          width: 122rpx;
          height: 42rpx;
          display: block;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 30rpx;
          letter-spacing: 0.3256578743457794rpx;
          white-space: nowrap;
          line-height: 42rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
